<template>
  <div class="releaseAddress">
    <div class="form">
      <div class="form-item">
        <!-- <picker
          mode="region"
          :value="cityInfo"
          @change="cityInfoChange">
        </picker> -->
        <CustomWrapInput
          v-model="formItem.city"
          title="城市/市区"
          desc="必须填写准确的城市/市区"
          placeholder="例：广东省佛山市南海区"
          :isInput="true" />
      </div>
      <div class="form-item">
        <CustomWrapInput
          v-model="formItem.roadDesc"
          title="道路号"
          desc="必须填写准确的道路号"
          placeholder="例：虹桥路180栋/广顺路23号" />
      </div>
    </div>

    <div class="sure clear">
      <button class="button pull-right" @tap="buttonClick">确定</button>
    </div>

    <i-toast id="toast" />
  </div>
</template>

<script>
import CustomWrapInput from 'components/CustomWrapInput/CustomWrapInput'
import { $Toast } from '../../../static/iview/base/index'
import { mapMutations } from 'vuex'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomWrapInput
  },
  data () {
    return {
      formItem: {
        city: '',
        roadDesc: ''
      },
      cityInfo: []
    }
  },
  methods: {
    cityInfoChange (e) {
      if (e.target && e.target.value) {
        this.formItem.city = e.target.value.join(' ')
      }
    },
    buttonClick () {
      if (!this.formItem.city) {
        $Toast({
          content: '必须填写 城市/市区',
          type: 'error'
        })
        return
      }

      // this.formItem.roadDesc = this.$refs['roadDesc'].getValue()
      this.SET_RELEASEADDRESS(JSON.parse(JSON.stringify(this.formItem)))

      wx.navigateBack()
    },
    ...mapMutations({
      'SET_RELEASEADDRESS': 'releaseAddress/SET_RELEASEADDRESS'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .releaseAddress {
    width: 100%;
    height: 100%;
    // background-color: rgb(248, 248, 248);
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
    > .sure {
      margin-top: 15px;
      margin-right: 15px;
      > .button {
        width: 100px;
        background-color: $color-default;
        border-radius: 20px;
        color: white;
        font-size: 16px;
      }
    }
  }
</style>
